<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0 user-scalable=no"
    />
    <link rel="stylesheet" href="../dist/xr-ui.css" />
    <link rel="stylesheet" href="./mine.css" />
    <title>个人中心</title>
  </head>
  <body class="page-mine">
    <!-- 个人信息 -->
    <div class="xr-panel-body user yp-category">
      <img class="portrait" src="./img/list-img.png" alt="用户头像" />
      <div class="info">
        <h2 class="nick-name">Rosen</h2>
        <p class="detail">
          <a href="" class="detail-item">关注 999</a>
          <a href="" class="detail-item">收藏 99万</a>
        </p>
      </div>
    </div>
    <!-- 菜单区域 -->
    <div class="xr-panel-body no-padding yp-category">
      <div class="xr-menu">
        <a class="xr-menu-item">
          <p class="xr-menu-name">我的钱包</p>
          <i class="fa fa-chevron-right xr-menu-icon"></i>
        </a>
        <a class="xr-menu-item">
          <p class="xr-menu-name">我的文章</p>
          <i class="fa fa-chevron-right xr-menu-icon"></i>
        </a>
        <a class="xr-menu-item">
          <p class="xr-menu-name">访问统计</p>
          <i class="fa fa-chevron-right xr-menu-icon"></i>
        </a>
        <a class="xr-menu-item">
          <p class="xr-menu-name">我的推广码</p>
          <i class="fa fa-qrcode xr-menu-value"></i>
          <i class="fa fa-chevron-right xr-menu-icon"></i>
        </a>
        <a class="xr-menu-item">
          <p class="xr-menu-name">接收到新消息</p>
          <input class="xr-switch" type="checkbox" id="js-show" />
        </a>
      </div>
    </div>
    <!-- 设置 -->
    <div class="xr-panel-body no-padding yp-category">
      <div class="xr-menu">
        <a class="xr-menu-item">
          <p class="xr-menu-name">设置</p>
          <i class="fa fa-chevron-right xr-menu-icon"></i>
        </a>
        <a class="xr-menu-item">
          <p class="xr-menu-name">意见反馈</p>
          <i class="fa fa-chevron-right xr-menu-icon"></i>
        </a>
      </div>
    </div>
    <div class="xr-panel-body no-padding">
      <span class="xr-btn xr-btn-large logout-btn">退出登录</span>
    </div>

    <!-- 确认关闭新消息提醒 -->
    <div class="xr-action-sheet">
      <!-- 需要打开弹窗时，添加“show”这个类即可 -->
      <!-- <div class="xr-action-sheet show"> -->
      <div class="xr-mask"></div>
      <div class="xr-action-sheet-wrap">
        <div class="xr-action-sheet-header">
          <h1 class="xr-action-sheet-title">
            关闭该功能后，您将不再收到新消息的通知，确定要这样做吗?
          </h1>
        </div>
        <div class="xr-action-sheet-body" id="js-close">
          <a class="xr-action-sheet-menu">关闭新消息提醒</a>
        </div>
        <div class="xr-action-sheet-footer">
          <a class="xr-action-sheet-menu">取消</a>
        </div>
      </div>
    </div>


    <script>
       window.onload = ()=>{
          // 弹出菜单
          document.querySelector('#js-show').onclick = (e) => {
              document.querySelector('.xr-action-sheet').classList.add('show');
          }
          // 收回菜单
          document.querySelector('#js-close').onclick = (e) => {
              document.querySelector('.xr-action-sheet').classList.remove('show');
          }
      };
    </script>
  </body>
</html>
